<template>
  <div class="axiom-vertical-layout">
    <header v-if="$slots.header" class="axiom-vertical-layout__header">
      <slot name="header"></slot>
    </header>
    <main class="axiom-vertical-layout__content">
      <slot></slot>
    </main>
    <footer v-if="$slots.footer" class="axiom-vertical-layout__footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'AxiomVerticalLayout'
});

const contentRef = ref(null);

defineExpose({
  contentRef,
});
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-vertical-layout';
</style> 